<template>
	<view class="mode-view">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">模式选择</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" v-for="(item, index) in tabs" :key="index" :class="activeIndex === index && activeClass"
			 @click="select(item.value, index)">
				{{item.label}}
			</view>
		</scroll-view>
		<view class="mode-container">
			<view class="mode-cricle-content" :style="getModeConStyle">
				<scroll-view scroll-y style="height: 100%;">
					<view class="grid justify-center col-3">
						<template v-for="(item, index) in modeSource.modeList">
							<m-mode-cricle :key="index" :is-null="item.colors === null" :type="item.modeType.type + 1" :label="item.label"
							 :active="modeSelectIndex === index" @longpress="longpress(item, index, item.colors === null)" @tap="onSend(item, index, item.colors === null)"></m-mode-cricle>
						</template>
					</view>
				</scroll-view>
			</view>
			<view class="mode-slider">
				<template v-for="(item, index) in modeSource.modeCtrlList">
					<view class="flex text-center margin-sm" :key="index">
						<text class="flex-sub">{{item.label}}</text>
						<slider :data-index="index" @change="sliderChange" class="flex-twice slider" block-size="20" activeColor="#007aff"
						 :value="item.value" :min="item.min" :max="item.max" show-value />
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import MModeCricle from "@/components/m-mode-cricle.vue"
	import {
		setMode,
		setDiyMode,
		setLight,
		setSpeed,
		setMic,
		musicMode
	} from '@/common/msg-helper.js'
	export default {
		components: {
			MModeCricle
		},
		data() {
			return {
				activeIndex: 0,
				modeSelectIndex: null,
				activeClass: 'text-blue cur',
				tabs: [{
						value: 0,
						label: '全局'
					},
					{
						value: 1,
						label: '分区1'
					},
					{
						value: 2,
						label: '分区2'
					}
				]
			};
		},
		computed: {
			...mapGetters(['modeSource']),
			getModeConStyle() {
				let height = 265;
				let len = this.modeSource.modeCtrlList.length;
				if (len > 3) {
					height = height + (len - 3) * 30;
				}
				return `height: calc(100vh - ${height}px);`;
			}
		},
		onShow() {
			const {
				has
			} = this.modeAllIsSet();
			if (!has) {
				this.modeSource.modeList.push({
					label: '',
					colors: null,
					modeType: null
				}, {
					label: '',
					colors: null,
					modeType: null
				}, {
					label: '',
					colors: null,
					modeType: null
				}, )
			}
		},
		methods: {
			//发送 bool === true 时，添加模式 反之发送
			onSend(item, index, bool) {
				this.modeSelectIndex = index;
				if (bool) {
					this.onEdit(item, index)
				} else {

					if (item.disabled == true) {
						setMode(this.activeIndex, item.modeType.type)
					} else {
						let colors = []
						for (let i = 0; i < 16; i++) {
							if (item.colors[i].value == '') {
								continue
							} else {
								let cr = this.formatColorArr(item.colors[i].value)
								colors.push({
									r: cr[0],
									g: cr[1],
									b: cr[2],
								})
							}
						}
						if (item.modeType.LV_DO) {
							console.log('音律模式')
							musicMode(this.activeIndex, colors, item.modeType.type)
						} else {
							setDiyMode(this.activeIndex, colors, item.modeType.type)
						}
					}
				}
			},
			//滑块滑动
			onSliderChange(item) {
				console.log('滑块滑动', item)
				if (item.type == 1) {
					setLight(this.activeIndex, item.value)
				}
				if (item.type == 2) {
					setSpeed(this.activeIndex, item.value)
				}
				if (item.type == 3) {
					setMic(this.activeIndex, item.value)
				}
			},
			//选择头部tab
			select(value, index) {
				this.activeIndex = index;
				console.log('value', value)
			},

			sliderChange(e) {
				let index = e.currentTarget.dataset.index;
				let value = e.detail.value;
				this.modeSource.modeCtrlList[index].value = value;
				this.$store.dispatch('app/setModeSource', this.modeSource);
				this.onSliderChange(this.modeSource.modeCtrlList[index]);
			},
			longpress(item, index, bool) {
				if (item.disabled || bool) return;
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					itemColor: '#0081ff',
					success: (e) => {
						if (e.tapIndex === 0) {
							this.onEdit(item, index)
						} else if (e.tapIndex === 1) {
							this.onDelete(index)
						}
					}
				})
			},
			onEdit(item, index) {
				this.$store.dispatch('app/setModeParams', {
					modeSelectIndex: index
				})
				uni.navigateTo({
					url: '/pages/custom/custom'
				})
			},
			onDelete(index) {
				let modeList = this.modeSource.modeList;
				modeList[index].colors = null;
				modeList[index].modeType = null;
				const {
					total
				} = this.modeAllIsSet();
				if (total > 3) {
					modeList.splice(modeList.length - 1, 1);
					modeList.splice(modeList.length - 1, 1)
					modeList.splice(modeList.length - 1, 1)
				}
				this.modeSource.modeList = modeList
				this.$store.dispatch('app/setModeSource', this.modeSource)
				this.$forceUpdate();
			},
			/* 
			 @return Boolean
			 */
			modeAllIsSet() {
				let has = false;
				let total = 0;
				this.modeSource.modeList.map(item => {
					if (item.colors === null) {
						has = true;
						total++;
					}
				})
				return {
					has,
					total
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mode-view {
		.slider {
			margin: 0 !important;
		}

		.mode-slider {
			.margin-sm {
				margin: 30rpx 22rpx;
			}
		}
	}

	.mode-container {
		height: calc(100vh - 110px);
		background: #ffff;
	}

	.m-cricle {
		display: inline-block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: relative;
		text-align: center;
		line-height: 60px;
		font-size: 13px;

		&.cuIcon-add {
			border: 1px solid #aba7a7;

			&::before {
				font-size: 22px;
				color: #aba7a7;
			}
		}
	}

	.mode-cricle-content {
		padding: 15px 20px 0;
	}
</style>
